<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加权限</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="formInfo">
    <input type="hidden" name="pkId" id="pkId">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label">上级菜单</label>
                <div class="layui-input-block">
                    <input type="text" name="parentName" lay-verify="required" lay-reqtext="上级菜单不能为空" placeholder="请选择上级菜单" onclick="selectParent()" readonly class="layui-input">
                    <input type="hidden" name="parentId">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限类别</label>
                <div class="layui-input-block">
                    <input type="radio" lay-filter="menuType" name="menuType" value="1" title="目录" checked>
                    <input type="radio" lay-filter="menuType" name="menuType" value="2" title="菜单">
                    <input type="radio" lay-filter="menuType" name="menuType" value="3" title="按钮">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">权限名称</label>
                <div class="layui-input-block">
                    <input type="text" name="menuName" lay-verify="required" lay-reqtext="菜单名称不能为空" placeholder="请输入菜单名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">显示名称</label>
                <div class="layui-input-block">
                    <input type="text" name="displayName" lay-verify="required" lay-reqtext="显示名称不能为空" placeholder="请输入显示名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" id="icon_div">
                <label class="layui-form-label required">图标</label>
                <div class="layui-input-block">
                    <input type="text" name="menuIcon" id="menuIcon" lay-filter="menuIcon" lay-reqtext="图标不能为空" placeholder="请输入图标" class="layui-input">
                    <span class="input-group-addon"></span>
                </div>
            </div>
            <div id="menu-info-div">
                <div class="layui-form-item">
                    <label class="layui-form-label required">菜单URL</label>
                    <div class="layui-input-block">
                        <input type="text" name="menuUrl" lay-reqtext="菜单URL不能为空" placeholder="请输入菜单URL" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">打开方式</label>
                    <div class="layui-input-block">
                        <input type="radio" name="openType" value="_self" title="新页签" checked>
                        <input type="radio" name="openType" value="_blank" title="新页面">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" id="authority-key-item">
                <label class="layui-form-label required">权限标识</label>
                <div class="layui-input-block">
                    <input type="text" name="authorityKey" lay-reqtext="权限标识不能为空" placeholder="请输入权限标识" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">是否显示</label>
                <div class="layui-input-block">
                    <input type="radio" name="isShow" value="1" title="显示" checked>
                    <input type="radio" name="isShow" value="0" title="隐藏">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="menuStatus" value="1" title="启用" checked>
                    <input type="radio" name="menuStatus" value="0" title="禁用">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">排序号</label>
                <div class="layui-input-block">
                    <input type="number" name="orderNo" lay-verify="required" lay-reqtext="排序号不能为空" placeholder="请输入排序号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea name="remark" class="layui-textarea" placeholder="请输入备注说明"></textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <a class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">
                <i class="layui-icon layui-icon-ok"></i>保存
            </a>
            <a class="layui-btn layui-btn-normal" onclick="closeWindow()">
                <i class="layui-icon layui-icon-close"></i>取消
            </a>
        </div>
    </div>
</div>
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js" charset="utf-8"></script>
<script>
    layui.use(['form','iconPickerFa'], function () {
        var iconPickerFa = layui.iconPickerFa,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //监听保存
        form.on('submit(saveBtn)', function (formdata) {
            formdata = formdata.field;

            if(formdata.menuType==1){
                formdata.menuUrl = "";
                formdata.authorityKey = "";
            }else if(formdata.menuType==2){
                if(formdata.menuUrl==""){
                    $("[name='menuUrl']").addClass("layui-form-danger");
                    $("[name='menuUrl']").focus();
                    layer.msg('请填写菜单访问地址', {icon: 5});
                    return;
                }
                formdata.authorityKey = "";
            }else{
                if(formdata.authorityKey==""){
                    $("[name='authorityKey']").addClass("layui-form-danger");
                    $("[name='authorityKey']").focus();
                    layer.msg('请填写权限标识', {icon: 5});
                    return;
                }
                formdata.menuUrl = "";
            }

            $.ajax({
                type: 'PUT',
                url: 'admin/rbac/menu',
                data: JSON.stringify(formdata),
                contentType: 'application/json',
                success:function(result){
                    if(result.code==0){
                        layer.alert(result.msg, function(){
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                            parent.renderTable();
                        });
                    }else{
                        layer.alert(result.msg);
                    }
                }
            });
        });

        form.on('radio(menuType)', function (data) {
            dealInfoShow(data.value);
        });

        iconPickerFa.render({
            elem: '#menuIcon', // 选择器，推荐使用input
            url: '../../../lib/font-awesome-4.7.0/less/variables.less',
            search: true, // 是否开启搜索：true/false，默认true
            page: true, // 是否开启分页：true/false，默认true
            limit: 12, // 每页显示数量，默认12
            cellWidth: '20%', // 每个图标格子的宽度：'43px'或'20%'
            click: function (data) { // 点击回调
                console.log(data);
            },
            success: function(d) { // 渲染成功后的回调
                console.log(d);
            }
        });

        $.ajax({
            type: 'GET',
            url: 'admin/rbac/menu/' + $("#pkId").val(),
            contentType: 'application/json',
            success: function (result) {
                if (result.code == 0) {
                    form.val("formInfo", result.data);
                } else {
                    layer.alert(result.msg);
                }
            }
        });
        dealInfoShow($("input[name='menuType']:checked").val());
    });

    function closeWindow(){
        var iframeIndex = parent.layer.getFrameIndex(window.name);
        parent.layer.close(iframeIndex);
    }

    function selectParent(){
        var index = layer.open({
            title: '上级目录',
            type: 2,
            shade: 0.2,
            maxmin: false,
            area: ['50%', '85%'],
            content: 'menu-tree.html'
        });
    }
    //根据权限类别判断元素显隐
    function dealInfoShow(menuType){
        if(menuType == 1){
            $("#authority-key-item").hide();
            $("#menu-info-div").hide();
            $("#icon_div").show();
        }else if(menuType == 2){
            $("#authority-key-item").hide();
            $("#menu-info-div").show();
            $("#icon_div").show();
        }else{
            $("#authority-key-item").show();
            $("#menu-info-div").hide();
            $("#icon_div").hide();
        }
    }
    function setValue(data){
        $("#pkId").val(data);
    }
</script>
</body>
</html>